<template>
  <nav class="navbar">
    <div class="leftMenu">
      <img src="../assets/logo.png" />
    </div>
    <div class="rightMenu"> 
      <span v-show="token">{{NameAndType}}</span>
      <img class="ml-5" style="height: 30px" src="@/assets/gita.gif" alt="" />
      <span class="line"></span>
      <span v-if="token===''" class="logout" @click="clickLogin">立即登录</span>
      <span v-else class="logout" @click="clickLogout">退出登录</span>
      <div class="lang rel">
        <span class="text abs">cn</span>
      </div>
    </div>
  </nav>
</template>

<script setup>
import {useStore} from '@/store/useStore'
import {useRouter} from 'vue-router'
import {storeToRefs} from 'pinia'
import { computed } from 'vue';

const store = useStore();
const router = useRouter();
let { username, token, type,isLogin } = storeToRefs(store);

//计算属性
let NameAndType = computed(()=>{
  if(type.value=='1'){
    return username.value+'('+'超级管理员'+')'
  }else if(type.value=='2'){
    return username.value+'('+'管理员'+')'
  }else{
    return username.value+'('+'用户'+')'
  }
})

const clickLogin = ()=>{
  router.push({
    path:'/login'
  })

}

const clickLogout = ()=>{
  store.$patch(()=>{
    username.value = '';
    token.value = '';
    type.value = '';
    store.setRoutes([])
    // isLogin.value = false;
  })
  // localStorage.clear()
  // store.setUsername('');
  router.push({
    path:'/login'
  })
}
</script>

<style scoped lang="less">
.navbar {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}

.leftMenu {
  height: 100%;
  display: flex;
  align-items: center;

  > img {
    height: 35px;
    width: auto;
    margin-left: 15px;
  }
}

.rightMenu {
  display: flex;
  align-items: center;
  // padding-right: 50px;
  .lang {
    width: 0;
    height: 0;
    border: 25px solid #014ff7;
    border-bottom-color: transparent;
    border-left-color: transparent;
    .text {
      font-size: 20px;
      top: -24px;
      left: 0;
      color: #fff;
    }
  }
  .flag {
    height: 30px;
    width: auto;
    margin-right: 10px;
  }
  .logout {
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
  }

  .line {
    height: 16px;
    width: 1px;
    background: rgba(90, 88, 88, 0.36);
    margin-left: 10px;
  }
  .icon-screenfull {
    font-size: 22px;
    margin: 0 10px;
  }
  .langSelect {
    height: 50px;
    width: auto;
  }
}
</style>
